import { createApp } from 'vue'
import App from './App.vue'
import jquery from "jquery";

const app = createApp(App)

app.directive('drag', {
    mounted(el,bindings,vnode){
        console.log(bindings)
        console.log(vnode)
        el.style.cursor='grab'

        el.addEventListener('mousedown',(e)=>{
            e.preventDefault()
            e.stopPropagation()

            let pScaleX=1.0
            let pScaleY=1.0

            if($(el).parents('[canmove=true]').length>0) {
                const transform=$(el).parents('[canmove=true]')[0].style.transform
                const str=transform.substring(transform.indexOf('scale')+5,transform.indexOf(")",transform.indexOf('scale'))).replace("(","").replace(")","")
                const ss=str.split(",")
                pScaleX=parseFloat(ss[0])
                pScaleY=parseFloat(ss[1])
            }

            const scaleX=bindings.value.scaleX
            const scaleY=bindings.value.scaleY
            const originLeft=bindings.value.left
            const originTop=bindings.value.top

            el.startX=e.pageX
            el.startY=e.pageY

            const onMouseup=(e)=>{
                document.body.style.cursor='grab'
                document.body.removeEventListener('mousemove',onMousemove)
                document.body.removeEventListener('mouseup',onMouseup)
            }
            const onMousemove=(e)=>{
                document.body.style.cursor='grabbing'
                const left = originLeft+(e.pageX - el.startX)/(scaleX*pScaleX)
                const top =  originTop+(e.pageY - el.startY)/(scaleY*pScaleY)
                bindings.value.left=left
                bindings.value.top=top
            }

            document.body.addEventListener('mouseup',onMouseup)
            document.body.addEventListener("mousemove",onMousemove)
        })
    }
})

app.mount('body')
